<template>
    <div class="brand_page col-md-4">
        <el-form label-width="100px">
            <h3 class="tom_margin">新增一级菜单</h3>
            <el-form-item label="菜单名称">
                <el-input v-model="form.menu" placeholder="请输入菜单名称" size="200px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="sub_menu1()">确定</el-button>
            </el-form-item>

            <h3 class="tom_margin">新增二级菜单</h3>
            <el-form-item label="选择一级菜单">
                <el-select v-model="form.menu_m" placeholder="选择一级菜单">
                    <el-option v-for="(item,index) in menu_option" :key="index" :label="item.label" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="菜单名称">
                <el-input v-model="form.menu_s" placeholder="请输入菜单名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add_menu_e()">确定</el-button>
            </el-form-item>
        </el-form>
        <div class="row">
            <h3 class="tom_margin">效果预览</h3>
            <el-tree :data="treeData" ref="tree" node-key="id" default-expand-all highlight-current show-checkbox></el-tree>
            <input type="button" value="删除菜单(单选)" class="btn btn-danger del_btn" @click="delette_node()">
        </div>
    </div>
</template>
<script>
import g from '../../components/global.js'
export default {
  data() {
    return {
      form: {
        menu: '',
        menu_m: '',
        menu_s: ''
      },
      menu_option: [],
      treeData: []
    }
  },
  mounted() {
    this.get_menu()
  },
  methods: {
    sub_menu1() {
      var _this = this
      $.ajax({
        type: 'post',
        url: g.res_url + '/api/v1/save_pro_menu',
        data: {
          name: _this.form.menu
        },
        success: function(data) {
          if (data == 'success') {
            _this.$message.success('操作成功')
            _this.get_menu()
          } else {
            _this.$message.error('操作失败')
          }
        },
        error: function() {
          _this.$message.error('网络错误')
        }
      })
    },
    get_menu() {
      var _this = this
      $.ajax({
        type: 'post',
        url: g.res_url + '/api/v1/get_class',
        success: function(data) {
          var dataobj = JSON.parse(data)
          var parent_menu = []
          var child_menu = []
          dataobj.data.forEach(v => {
            if (v.parent_id == null) {
              parent_menu.push({
                id: v.id,
                label: v.name,
                children: []
              })
            } else {
              child_menu.push(v)
            }
          })
          _this.menu_option = parent_menu
          parent_menu.forEach(x => {
            child_menu.forEach(y => {
              if (x.id == y.parent_id) {
                x.children.push({
                  id: y.id,
                  label: y.name
                })
              }
            })
          })
          _this.treeData = parent_menu
        }
      })
    },
    add_menu_e() {
      var _this = this
      $.ajax({
        type: 'post',
        url: g.res_url + '/api/v1/save_pro_menu',
        data: {
          name: _this.form.menu_s,
          parent_id: _this.form.menu_m
        },
        success: function(data) {
          if (data == 'success') {
            _this.$message.success('操作成功')
            _this.get_menu()
          } else {
            _this.$message.error('操作失败')
          }
        },
        error: function() {
          _this.$message.error('网络错误')
        }
      })
    },
    delette_node() {
      var _this = this
      var node_id = this.$refs.tree.getCheckedNodes()
      var reqData = {}
      node_id.forEach(v => {
        reqData.id=v.id
      })
      $.ajax({
        type: 'post',
        url: g.res_url + '/api/v1/del_node',
        data: {
          class_id:reqData.id
        },
        success: function(data) {
          if (data == 'success') {
            _this.$message.success('操作成功')
            _this.get_menu()
          } else {
            _this.$message.error('操作失败')
          }
        },
        error: function() {
          _this.$message.error('网络错误')
        }
      })
    }
  }
}
</script>
<style scoped>
.row_height {
  height: 150px !important;
  margin: 28px 0;
}
.tom_margin {
  margin-bottom: 10px;
  margin-top: 30px;
}
.del_btn {
  margin: 20px 0 80px 20px;
}
</style>

